<template>
    <div id="quan">
        <div id="qq">
            <div id="aa">
                <span class="fa fa-angle-left" @touchstart="back"></span>
            </div>
            <div id="zz">注册</div>
            <div id="ww">···</div>
        </div>
        <div id="cc">
            <span class="fa fa-user-o pp"></span><input type="text" v-model="username" placeholder="手机号码" class="mm" required>
            <br>
            <span class="fa fa-expeditedssl pp"></span><input type="text" v-model="psw" placeholder="密码" class="mm" required>
            <br>
            <span class="fa fa-building pp"></span><input type="text" v-model="captcha" placeholder="验证码" class="mm">
            <img src="/api/captcha" id="cap">
            <a @click="refreshCaptcha()">看不清，换一张</a>
        </div>
        <button id="btn" @touchstart="registBtn">注册</button>
        <br>
        <div id="hh">
            <input type="checkbox" checked>
            <span id="bb">我已阅读并同意</span>
            <span id="gg">《免税易购用户协议》</span>
        </div>
        <br>
        <div id="ha">已有免税易购帐号，现在登录！</div>
        <br>
        <router-link to="/user/login" id="ctn">登录</router-link>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                username: '',
                psw: '',
                captcha:""
            }
        },
        methods: {
            back: function () {
                history.back();
            },
            refreshCaptcha:function(){
                var cap=document.getElementById("cap");
                cap.setAttribute("src","/api/captcha?"+Math.random());
            },
            registBtn: function () {
                // console.log(123)
                if (this.username && this.psw &&this.captcha) {
                    var regObj = {
                        username: this.username,
                        psw: this.psw,
                        captcha:this.captcha
                    }
                    this.$store.dispatch("requestRegist", regObj)
                        .then(res => {
                            // console.dir(res.data.msg)
                            this.layer.alert(res.data.msg);
                            location.href = '#/user/login';
                        });
                } else {
                    this.layer.alert("请完善信息");
                }
            }
        }
    }
</script>

<style scoped>
    #quan {
        background-color: #eee;
        height: 100vh;
    }

    #qq {
        display: flex;
        height: 10vh;
        width: 100vw;
        border-bottom: solid 2px #bbb;
    }

    #aa {
        width: 10vh;
        height: 10vh;
        font-size: 8vh;
        text-align: center;
        line-height: 10vh;
        color: #999;
    }

    #zz {
        width: 50vh;
        text-align: center;
        line-height: 10vh;
    }

    #ww {
        width: 10vh;
        height: 10vh;
        font-size: 10vh;
        text-align: center;
        line-height: 10vh;
        color: #999;
    }


    #cc {
        text-align: left;
        padding-left: 6vw;
    }
    #cc a{
        font-size: 12px;
        margin-left: 10px;
    }
    .pp {
        width: 13vw;
        height: 13vw;
        font-size: 7vw;
        border: solid 1px #ccc;
        border-right: none;
        text-align: center;
        line-height: 13vw;
        margin-top: 10px;
        background-color: white;
        color: #ccc;
    }

    .mm {
        height: 13vw;
        width: 75vw;
        position: relative;
        top: -2px;
        border: solid 1px #ccc;
        color: #aaa;
        padding-left: 10px;
    }
    #kk {
        position: relative;
        display: inline-block;
        height: 13vw;
        width: 23vw;
        border-radius: 2vw;
        text-align: center;
        color: white;
        line-height: 13vw;
        background-color: #778F9F;
        font-size: 14px;
        top: -2px;
    }

    #btn {
        display: block;
        width: 88vw;
        height: 13vw;
        margin: 4vw 6vw 2vw 6vw;
        border-radius: 2vw;
        background-color: #F27F40;
        color: white;
        border: none;
        text-align: center;
        line-height: 13vw;
    }

    #hh {
        width: 88vw;
        margin: -3vw 6vw;
    }

    #hh input {
        width: 13px;
        height: 13px;
    }

    #bb {
        font-size: 12px;
    }

    #gg {
        font-size: 12px;
        color: #F27F40;
    }

    #ha {
        font-size: 14px;
        color: #aaa;
        margin: -0 8vw;
    }

    #ctn {
        display: block;
        width: 88vw;
        height: 13vw;
        margin: 0 6vw;
        border-radius: 2vw;
        border: solid 1px #F27F40 !important;
        color: #555;
        border: none;
        text-align: center;
        line-height: 13vw;
    }
</style>